<template>
  <div class="light-Ct">
      <div class="item-Cd">
          <div @click="seeNodeDetail(index, item)" class="light-circle" :class="{
              'light-green': item.nodeState == 1,
              'light-red': item.nodeState == 0,
              'light-orange': item.nodeState == 2,
          }">
              {{ item.percent }}
          </div>

          <div class="item-name">
              <div v-if="!isEditing" @click="startEdit" class="pointers">{{ item.nodeName }}</div>
              <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput"
                  style="width: 200px;" />
          </div>

          <div class="operation">
              <a @click="addBrotherItem(index, item)">同级 +</a>
              <span>|</span>
              <a @click="addChildItem(index, item)">子级 +</a>
              <span>|</span>
              <a @click="deleteItem(index, item)">删除</a>
          </div>

          <div class="item-info">
              <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
              <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
          </div>

          <div class="item-btn"><a @click="testIntem(index, item)">编辑</a></div>
      </div>
      <div v-if="item.children && item.children.length"
          :class="item.children && item.children.length ? 'childItem childItemSon' : 'childItem'">
          <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child"
              :index="childIndex" @editItem="editItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem"
              @deleteItem="deleteItem" @testIntem="testIntem" @seeNodeDetail="seeNodeDetail" />
      </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, onUnmounted, nextTick } from 'vue';
import RecursiveItem from './RecursiveItem.vue';
import { formatDateTime } from "@/utils/format";

const props = defineProps({
  item: {
      type: Object,
      required: true
  },
  index: {
      type: Number,
      required: true
  }
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem']);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);
const editInput = ref(null);

const startEdit = () => {
  isEditing.value = true;
  nextTick(() => {
      if (isEditing.value && editInput.value) {
          editInput.value.focus();
      }
  });
};

const finishEdit = () => {
  isEditing.value = false;
  if (!editedName.value) {
      return;
  }
  if (editedName.value !== props.item.nodeName) {
      emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
  }
};

const testIntem = (index, item) => {
  emit('testIntem', index, item);
};

const editItem = (index, item) => {
  emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
  emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
  emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
  emit('deleteItem', index, item);
};

const seeNodeDetail = (index, item) => {
  emit('seeNodeDetail', index, item);
};

onMounted(() => {});

onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.light-Ct {
padding-left: 20px; /* 每一级的缩进 */
}

.item-Cd {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
background-color: #f9f9f9;
position: relative;
}

.light-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
left: -20px; /* 调整位置以适应思维导图样式 */
top: 10px;
}

.light-green {
background-color: green;
color: white;
}

.light-red {
background-color: red;
color: white;
}

.light-orange {
background-color: orange;
color: white;
}

.item-name {
margin-top: 10px;
font-weight: bold;
}

.pointers {
cursor: pointer;
}

.operation {
margin-top: 10px;
font-size: 12px;
}

.operation a {
cursor: pointer;
text-decoration: none;
color: #007bff;
}

.operation span {
margin: 0 5px;
}

.item-info {
margin-top: 10px;
font-size: 12px;
color: #666;
}

.item-btn a {
cursor: pointer;
text-decoration: none;
color: #007bff;
}

/* 子节点样式 */
.childItem {
margin-left: 20px; /* 子节点的额外缩进 */
border-left: 1px dashed #ccc;
padding-left: 10px;
position: relative;
}

.childItemSon {
margin-top: 10px;
}

/* 连接线样式 */
.childItem::before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 1px;
height: calc(100% - 10px);
background-color: #ccc;
}

.childItemSon::before {
top: 0;
}
</style>